<div ng-controller="AppCtrl" ng-cloak layout-gt-sm="row">

  <div flex-gt-sm="50" flex>

    <md-toolbar layout="row" class="md-hue-3">
      <div class="md-toolbar-tools">
        <span>Normal</span>
      </div>
    </md-toolbar>

    <md-content>
      <md-list flex>
        <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
        <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
          <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
          <div class="md-list-item-text" layout="column">
            <h3>{{ item.who }}</h3>
            <h4>{{ item.what }}</h4>
            <p>{{ item.notes }}</p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">2 line item</md-subheader>
        <md-list-item class="md-2-line">
          <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[0].who }}</h3>
            <p>Secondary text</p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
        <md-list-item class="md-3-line md-long-text">
          <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[0].who }}</h3>
            <p>
              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed.
            </p>
          </div>
        </md-list-item>
        <md-list-item class="md-3-line md-long-text">
          <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[1].who }}</h3>
            <p>
              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed.
            </p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">Classes</md-subheader>
        <md-list-item class="md-2-line" ng-repeat="phone in phones">
          <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
          <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
               ng-if="phone.options.face"/>
          <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
            <h3> {{ phone.number }} </h3>
            <p> {{ phone.type }} </p>
          </div>
          <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
            <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
          </md-button>
        </md-list-item>
      </md-list>
    </md-content>
  </div>

  <md-divider></md-divider>

  <div flex-gt-sm="50" flex>

    <md-toolbar layout="row" class="md-hue-3">
      <div class="md-toolbar-tools">
        <span>Dense</span>
      </div>
    </md-toolbar>

    <md-content>

      <md-list class="md-dense" flex>
        <md-subheader class="md-no-sticky">3 line item (dense)</md-subheader>
        <md-list-item class="md-3-line" ng-repeat="item in todos">
          <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
          <div class="md-list-item-text" layout="column">
            <h3>{{ item.who }}</h3>
            <h4>{{ item.what }}</h4>
            <p>{{ item.notes }}</p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">2 line item</md-subheader>
        <md-list-item class="md-2-line">
          <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[0].who }}</h3>
            <p>Secondary text</p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
        <md-list-item class="md-3-line md-long-text">
          <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[0].who }}</h3>
            <p>
              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
              quam.  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
              volutpat condimentum velit.
            </p>
          </div>
        </md-list-item>
        <md-list-item class="md-3-line md-long-text">
          <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}" />
          <div class="md-list-item-text">
            <h3>{{ todos[1].who }}</h3>
            <p>
              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
              quam.  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
              volutpat condimentum velit.
            </p>
          </div>
        </md-list-item>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">Classes</md-subheader>
        <md-list-item class="md-2-line" ng-repeat="phone in phones">
          <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon" ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
          <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
               ng-if="phone.options.face"/>
          <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
            <h3> {{ phone.number }} </h3>
            <p> {{ phone.type }} </p>
          </div>
          <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)" ng-if="phone.options.actionIcon" aria-label="call">
            <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
          </md-button>
        </md-list-item>
      </md-list>
    </md-content>
  </div>

</div>
